<template>
  <div class="advanced-setting">
    <!-- 分隔符号 -->
    <a-form-item
      label="分隔符号"
      :label-col="{ span: 3 }"
      :label-align="'left'"
    >
      <a-select
        v-model="delimiterSelected"
        placeholder="请选择"
        class="select-box"
        size="small"
        style="width: 316px;"
        @change="changeSeparate"
      >
        <a-select-option
          v-for="symbol in delimiterOptions"
          :key="symbol"
          :value="symbol"
          >{{ symbol }}
        </a-select-option>
      </a-select>
      <a-tooltip placement="top">
        <template slot="title">
          指定每条记录中用于分隔字段的分隔符。默认为逗号，并支持任意单字节字符作为分隔符。
        </template>
        <a-icon-font type="iconbangzhu" class="icon-help" />
      </a-tooltip>
      <a-input
        v-if="delimiterSelected === '其他'"
        size="small"
        :style="{
          width: '100px',
          'margin-left': '20px',
        }"
        placeholder="请输入"
        @change="changeSeparateInput"
      />
    </a-form-item>
    <!-- 引用符号 -->
    <a-form-item
      label="引用符号"
      :label-col="{ span: 3 }"
      :label-align="'left'"
    >
      <a-input
        v-model="tableQuote"
        size="small"
        style="width: 316px;"
        placeholder="请输入"
        @change="changeQuote"
      />
      <a-tooltip placement="top">
        <template slot="title">
          指定把包裹每个字段的引用符。默认为双引号，并支持任意单字节字符作为引用符。
        </template>
        <a-icon-font type="iconbangzhu" class="icon-help" />
      </a-tooltip>
    </a-form-item>
    <!-- 转义符号 -->
    <a-form-item
      label="转义符号"
      :label-col="{ span: 3 }"
      :label-align="'left'"
    >
      <a-input
        v-model="tableEscape"
        size="small"
        style="width: 316px;"
        placeholder="请输入"
        @change="changeEscape"
      />
      <a-tooltip placement="top">
        <template slot="title">
          指定添加到字段内容中出现引用符前的转义符。默认为双引号，并支持任意单字节字符作为转义符。
        </template>
        <a-icon-font type="iconbangzhu" class="icon-help" />
      </a-tooltip>
    </a-form-item>
    <a-form-item
      label=" "
      :colon="false"
      :label-col="{ span: 3 }"
      :label-align="'left'"
    >
      <a-button
        style="font-size: 12px; height: 24px; width: 200px;"
        @click="onAdvanceSettingChange"
      >
        确定设置
      </a-button>
      <!-- :disabled="isUploading" -->
    </a-form-item>
  </div>
</template>

<script lang="ts">
/**
 * 高级设置 分隔符号， 引用符号， 转移符号 component
 * 仅作用于 表格文件-csv
 * @author Jinhui Hou
 */
import { Component, Vue, Prop } from 'vue-property-decorator'
import DataUploadStore from '@/store/modules/data-upload'

@Component
export default class AdvancedSetting extends Vue {
  @Prop({ type: String }) fileName!: string // name

  // 分隔符号
  private tableSeparate: string = ','
  private delimiterOptions = [',', 'tab', 'space', '其他']
  private delimiterSelected = ','
  // 引用符号
  private tableQuote: string = '"'
  // 转义符号
  private tableEscape: string = '"'

  public mounted() {
    if (![',', 'tab', 'space'].includes(DataUploadStore.tableSeparate)) {
      this.delimiterSelected = '其他'
    } else {
      this.delimiterSelected = DataUploadStore.tableSeparate
    }
    this.tableSeparate = DataUploadStore.tableSeparate
    this.tableQuote = DataUploadStore.tableQuote
    this.tableEscape = DataUploadStore.tableEscape
  }

  /**
   * 分隔符号变换-选择
   */
  public changeSeparate(value: string) {
    if (value !== '其他') {
      this.tableSeparate = value
    } else {
      this.tableSeparate = ''
    }
  }

  /**
   * 分隔符号变换-input
   */
  public changeSeparateInput($event: any) {
    const { value } = $event.target
    this.tableSeparate = value
    DataUploadStore.setTableSeparate(value)
  }

  /**
   * 修改引用符号-input
   */
  public changeQuote($event: any) {
    const { value } = $event.target
    this.tableQuote = value
  }

  /**
   * 修改引用符号-input
   */
  public changeEscape($event: any) {
    const { value } = $event.target
    this.tableEscape = value
  }

  // 高级设置点击确定，有改变重新上传
  public onAdvanceSettingChange() {
    const { tableSeparate, tableQuote, tableEscape } = DataUploadStore
    DataUploadStore.setTableSeparate(this.tableSeparate)
    DataUploadStore.setTableQuote(this.tableQuote)
    DataUploadStore.setTableEscape(this.tableEscape)
    if (
      tableSeparate !== DataUploadStore.tableSeparate ||
      tableQuote !== DataUploadStore.tableQuote ||
      tableEscape !== DataUploadStore.tableEscape
    ) {
      this.$emit('confirm-advanced-setting')
    } else {
      this.$message.warn('高级设置无任何改变!')
    }
  }
}
</script>
<style lang="less" scoped>
.advanced-setting {
  width: 100%;

  /deep/ .ant-form-item {
    margin-bottom: 8px;
  }

  // 定死左侧 label 宽度
  /deep/ .ant-form-item-label-left {
    width: 110px;
  }

  .icon-help {
    cursor: pointer;
    font-size: 20px;
    margin-left: 10px;
  }
}
</style>
